<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-1.11.1.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
			font-family: "微软雅黑";
			outline: none;  
		}
		body{
			 background: url(image/1_171127170232_1.JPG) no-repeat center center fixed;
    		-webkit-background-size: cover;
   			-moz-background-size: cover;
    		-o-background-size: cover;
   			background-size: cover;
		}
		.loadIn{
			width: 500px;
			height: 500px;
			position: absolute;
			top: 150px;
			left: 510px;
			box-sizing: border-box;
			padding-top: 50px;
			text-align: center;
		}
		.loadIn #Time{
			font-size: 66px;
			color: #CD4F39;
			margin-bottom: 4px;
			margin-bottom: 10px;
		}
		.loadIn .helloP{
			font-size: 40px;
			color: white;
			margin-bottom: 20px;
		}
		.loadIn .loadArea{
			width: 300px;
			height: 140px;
			text-align: left;
			box-sizing: border-box;
			margin:0px 0px 4px 106px;
			padding:40px 0 0 40px;
			border-radius: 20px;
			background-image: url(image/1-14010Q1501D60.jpg);
			color: white;
			opacity: 0.7;
		}
		.loadIn .loadArea input{
			background-color: #ccc;
		}
		.loadIn .loadArea p{
			margin-bottom: 10px;
			font-size: 18px;	
		}
		.loadIn .touchToNew{
			color: white;
			cursor: pointer;
		}
		.warn{
			color: red;
			display: none;
		}
	</style>
</head>
<body>
	<div class="loadIn">
		<div id="Time">
			<span id="hour">00</span>
			<span class="Mao">:</span>
			<span id="min">00</span>
			<span class="Mao">:</span>
			<span id="sec">00</span>
		</div>
		<p class="helloP">
			<span class="hello">您好,</span>
			<span class="dOrName">请登录</span>
		</p>
		<div class="loadArea">
			<p>用户名:<input type="text" id="Name"></p>
			<p>密码：&nbsp;<input type="password" id="Pass"></p>
		</div>
		<div>
			<span class="touchToNew">登录</span>
			<p class="warn">请输入用户名和密码！</p>
		</div>
	</div>

	<script>
		$(function(){
			//时钟数字
			function timeChange(){
				var date=new Date;
				var h=date.getHours();
				var m=date.getMinutes();
				var s=date.getSeconds();
				if (h<=9) {
					h="0"+h;
				}
				if (m<=9) {
					m="0"+m;
				}
				if (s<=9) {
					s="0"+s;
				}
				if (h>=0&&h<=8) {
					$(".hello").text("早上好,")
				}else if(h>8&&h<12){
					$(".hello").text("上午好,")
				}else if(h>=12&&h<14){
					$(".hello").text("中午好,")
				}else if(h>=14&&h<=18){
					$(".hello").text("下午好,")
				}else{
					$(".hello").text("晚上好,")
				}
				$("#hour").text(h);
				$("#min").text(m);
				$("#sec").text(s);
			}
			var t=setInterval(timeChange,1000);
			//登录判断，登录获取Name，登录跳转新页面
			$(".touchToNew").click(function(){
				if ($("#Name").val()!=""&$("#Pass").val()!="") {
					window.name=$("#Name").val();
					window.location.href="留言板内容.html";
				}else{
					$(".warn").css("display","block");
				}
			})
		})
	</script>
</body>
</html>